<template>
  <div>
    <div class="imgMerror">
      <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()">
        <img src="https://img0.baidu.com/it/u=1876876259,4010062120&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" />
        <div class="imgMask"></div>
      </div>
      <div class="bigDiv">
        <img src="https://img0.baidu.com/it/u=1876876259,4010062120&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" class="bigImg" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    enter() {
      let imgMaskDom = document.querySelector('.imgMask')
      let bigDivDom = document.querySelector('.bigDiv')
      imgMaskDom.style.display = 'block'
      bigDivDom.style.display = 'block'
    },
    leave() {
      let imgMaskDom = document.querySelector('.imgMask')
      let bigDivDom = document.querySelector('.bigDiv')
      imgMaskDom.style.display = 'none'
      bigDivDom.style.display = 'none'
    },
    move(e) {
      let smallDivDom = document.querySelector('.smallDiv')
      let imgMaskDom = document.querySelector('.imgMask')
      let bigDivDom = document.querySelector('.bigDiv')
      let bigImgkDom = document.querySelector('.bigImg')

      let ev = e || window.event
      let left = ev.clientX - smallDivDom.offsetLeft - imgMaskDom.offsetWidth / 2
      let top = ev.clientY - smallDivDom.offsetTop - imgMaskDom.offsetHeight / 2
      if (left < 0) left = 0
      if (left > smallDivDom.offsetWidth - imgMaskDom.offsetWidth) {
        left = smallDivDom.offsetWidth - imgMaskDom.offsetWidth
      }
      if (top < 0) top = 0
      if (top > smallDivDom.offsetHeight - imgMaskDom.offsetHeight) {
        top = smallDivDom.offsetHeight - imgMaskDom.offsetHeight
      }
      imgMaskDom.style.left = left + 'px'
      imgMaskDom.style.top = top + 'px'

      //移动比例
      let precentX = left / (smallDivDom.offsetWidth - imgMaskDom.offsetWidth)
      let precentY = top / (smallDivDom.offsetHeight - imgMaskDom.offsetHeight)
      bigImgkDom.style.left = precentX * (bigDivDom.offsetWidth - bigImgkDom.offsetWidth) + 'px'
      bigImgkDom.style.top = precentY * (bigDivDom.offsetHeight - bigImgkDom.offsetHeight) + 'px'
    },
  },
}
</script>
  
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.smallDiv {
  border: 1px solid #ccc;
  width: 360px;
  height: 360px;
  position: relative;
  left: 0;
  top: 0;
}
img {
  width: 100%;
  height: 100%;
}
.imgMerror {
  position: relative;
  padding: 50px;
}
.imgMask {
  width: 240px;
  height: 240px;
  background: #00ff98;
  opacity: 0.5;
  cursor: move;
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.bigDiv {
  border: 1px solid #ccc;
  width: 540px;
  height: 540px;
  position: relative;
  left: 380px;
  top: -360px;
  overflow: hidden;
  display: none;
}
.img {
  width: 600px;
  height: 600px;
  position: absolute;
  left: 0;
  top: 0;
}
</style>